<template>
  <page-box>
    <div class="ui-search-box" slot="search-form">
      <el-form class="ui-search-form" label-width="120px" :model="params" ref="form">
        <el-form-item label="选择月份" prop="dsMonth">
          <el-date-picker
            v-model="params.dsMonth"
            type="monthrange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
            size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="每页数据">
          <el-select size="mini" class="ui-item-reset"  v-model="params.pageSize">
            <el-option label="5" :value="5"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="20" :value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="ui-search-btus">
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
        <el-button  size="mini" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>宿舍服务列表</div>
        <div>
          <el-button type="primary" size="mini" @click="exportDsExcel">导出</el-button>
          <el-button type="primary" size="mini" @click="open">新增</el-button>
        </div>
      </div>
      <el-table :data="dataList" @selection-change="handleSelectionChange" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
        <el-table-column type="selection" width="55"></el-table-column>
<!--        <el-table-column prop="dsId" label="服务号"></el-table-column>-->
        <el-table-column prop="dsMonth" label="月份"></el-table-column>
        <el-table-column prop="dsElectricBill" label="电费(元)"></el-table-column>
        <el-table-column prop="dsWaterBill" label="水费(元)"></el-table-column>
        <el-table-column prop="dsInternetBill" label="网费(元)"></el-table-column>
        <el-table-column prop="dsDorHygiene" label="宿舍卫生等级">
          <template v-if="scope.row.dsDorHygiene!=null" slot-scope="scope">
            <span v-if="scope.row.dsDorHygiene===1">优</span>
            <span v-if="scope.row.dsDorHygiene===2">良</span>
            <span v-if="scope.row.dsDorHygiene===3">差</span>
          </template>
        </el-table-column>
        <el-table-column prop="dsDorHygieneDetail" label="宿舍卫生情况"></el-table-column>
        <el-table-column prop="buildingNo" label="宿舍楼"></el-table-column>
        <el-table-column prop="dorNo" label="宿舍号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status==1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum"
        layout="total, prev, pager, next"
        :current-page="this.params.pageNum"
        :page-size="this.params.pageSize"
        :total="total">
      </el-pagination>
      <add-item v-bind:dsItem.sync='dsItem' @submit="addDs" ref="addItem"></add-item>

    </div>
  </page-box>
</template>
<script>
  import pageBox from '@/components/pageBox'
  import addItem from '@/components/dormitoryService/addItem.vue'

  export default {
    name: 'dormitoryServiceList',
    components: {
      pageBox, addItem
    },
    data() {
      return {
        dataList: [],
        exportDsList: [],
        params: {
          dsId:'',
          dsMonth:'',
          pageNum: 1,
          pageSize: 10,
          startTime: '',
          endTime: '',
        },
        total: 0,
        tabLoading: false,
        dsItem:{
          dsId:'',
          dsMonth: '',
          dsElectricBill: '',
          dsWaterBill:'',
          dsInternetBill:'',
          dsDorHygiene:'',
          buildingNo:'',
          dorNo:'',
          status:''
        },
        fileList:[]
      }
    },
    created() {
      this.getData()
    },
    methods: {
      open() {
        this.$refs.addItem.openWindow('添加宿舍服务表单')
      },
      addDs() {
        let dorId = this.dsItem.dorNo
        post('/pms_api/dormitoryService/add', {
          'dorId': dorId,
          'dsMonth': this.dsItem.dsMonth,
          'dsElectricBill': this.dsItem.dsElectricBill,
          'dsWaterBill':this.dsItem.dsWaterBill,
          'dsInternetBill':this.dsItem.dsInternetBill,
          'dsDorHygiene':this.dsItem.dsDorHygiene,
        }).then(res => {
          this.$refs.addItem.addDialogVisible = false;
          this.getData();
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      changPageNum(val) {
        this.params.pageNum = val
        this.getData()
      },
      getData() {
        if (this.params.dsMonth != null) {
          this.params.startTime = this.params.dsMonth[0]
          this.params.endTime = this.params.dsMonth[1]
          // this.params.dsMonth = ""
        }
        post('/pms_api/dormitoryService/list', this.params).then(res => {
          this.dataList = res.data
          this.total = res.totalPages
          console.log(res.data)
          this.tabLoading = false
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      checkDetail(item) {
        this.$router.push({
          path: '/dormitoryServiceDetail',
          query: {
            dsId: item.dsId
          }
        })
      },
      deleteItem(item) {
        post('/pms_api/dormitoryService/delete', {'dsId': item.dsId}).then(res => {
          this.getData()
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      handleSelectionChange(val) {
        this.exportDsList = val
      },
      exportDsExcel() {
        if (this.exportDsList.length > 0) {
          const tHeader = ['月份','宿舍楼', '宿舍号','水费', '水费详情(吨)','电费','电费详情(度)', '网费', '网费详情(包月 包年 包学期)','宿舍卫生等级 1优2良3差','宿舍卫生详情'];
          const filterVal = ['dsMonth','buildingNo', 'dorNo','dsWaterBill', 'dsWaterBillDetail','dsElectricBill', 'dsElectricBillDetail','dsInternetBill','dsInternetBillDetail', 'dsDorHygiene','dsDorHygieneDetail' ];
          const list = this.exportDsList;
          this.$getGlobal.exportFun('宿舍服务详情', tHeader, filterVal, list);
        } else {
          this.$message.error('请先选择需要导出的列表项');
        }
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getData()
      },
    }
  }
</script>


